<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス basetree</title>
  <othercredit role="translator">
    <firstname>Atuo</firstname>
    <surname>Seki</surname>
        <contrib>2006/04/27　翻訳初版</contrib>
 </othercredit>
<link rel="STYLESHEET" type="text/css" href="./styles.css" /></head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Basetree">
    <lztier>Base Components</lztier>
    <lzcategory>View</lzcategory>
    <lzshortdesc>
        treeを構築しコントロールする抽象的な基底クラス。
    </lzshortdesc>
    <lztag>base/basetree.xml</lztag>
</lzelement>

<p>サブクラス<classname>basetree</classname>でtreeの外観を自分なりに構築できます。
Basetreeには２つコンテンツがあります：<varname>item</varname>と<varname>children
</varname>。
<varname>item</varname>のviewにはtreeの視覚的コンポーネントを置く場所で、
あなたがtreeノードに入れたいどんなviewも<varname>item</varname>に入れるべきです。
また、あなたは<code>placement="item"</code>を設定できます。<varname>children</varname>
のviewはbasetreeのデフォルト配置です。
</p>

<p>以下の例では<varname>item</varname>と<varname>children</varname>が
treeでどう関連してくるかを示します。
<classname>basetree</classname>は視覚的なコンポーネントを持たないので、
<classname>tree</classname>をデモンストレーションの目的の為に使用します。
</p>

<img src="images/basetree/basetree-diagram.png"/>

<example title="Basetree subclass with echoed text node">
&lt;canvas width="200" height="200"&gt;
  &lt;include href="base/basetree.lzx"/&gt;

  &lt;class name="echotree" extends="basetree"&gt;
    &lt;view placement="item" layout="axis: x; spacing: 2" 
          bgcolor="${classroot.selected
                    ? classroot.style.selectedcolor 
                    : classroot.parent.bgcolor}"&gt;
      &lt;method event="onclick"&gt;
        classroot.changeFocus();
        if (! classroot.isleaf) {
          classroot.setAttribute("open", ! classroot.open);
        }
      &lt;/method&gt;
      &lt;text text="${classroot.text}" resize="true" /&gt;
      &lt;text text="${classroot.text}" resize="true" /&gt;
    &lt;/view&gt;
  &lt;/class&gt;

  &lt;view x="20" y="20" layout="axis: x; spacing: 10"&gt;
    &lt;echotree&gt;paragraph
      &lt;echotree&gt;sentence
        &lt;echotree&gt;words
          &lt;echotree isleaf="true"&gt;letter&lt;/echotree&gt;
          &lt;echotree isleaf="true"&gt;number&lt;/echotree&gt;
          &lt;echotree isleaf="true"&gt;punctuation&lt;/echotree&gt;
        &lt;/echotree&gt;
      &lt;/echotree&gt;
    &lt;/echotree&gt;
  &lt;/view&gt;
&lt;/canvas&gt;
</example>

<seealso>
<classes>tree</classes>
</seealso>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
